<template>
	<view class="uni_box home">
		<navbar title='邀请返佣'>
			<view class="hright" slot="right" @click="yaoshow=true">
				<image class="chongji" src="/static/mine/yao.png" mode="" />
			</view>
		</navbar>
		<view class="content">
			<u-sticky :offset-top="BarHeight()" h5-nav-height="44">
				<view class="tabview">
					<u-tabs :list="tablist" :is-scroll="false" :current="tabcurrent" @change="tabchange" active-color="#FF8004" inactive-color="#000000"></u-tabs>
				</view>
			</u-sticky>

			<view class="one" v-if="tabcurrent == 0">
				<view class="tone">
					<text class="tname">团队总人数：{{ teaminfo.team_total }} 人</text>
					<text class="tmiao">累计佣金：{{teaminfo.total_money}} USDT</text>
				</view>
				<view class="ttwo">
					<view class="tlist">
						<view class="thead">
							<view class="tview">
								账号
							</view>
							<view class="tview tend">
								注册时间
							</view>
						</view>
						<view class="thead" v-for="(item,index) in teamlist" :key="index">
							<view class="tview">
								{{item.email}}
							</view>
							<view class="tview tend">
								{{item.created_at}}
							</view>
						</view>
						
					</view>
				</view>
				<u-loadmore :status="status" />
			</view>
			<view class="two" v-if="tabcurrent == 1">
				<view class="tone">
					<text class="tname">本周收益：{{ inviteinfo.week_income }} USDT</text>
					<text class="tmiao">今日预估收益：{{ inviteinfo.today_income }} USDT</text>
				</view>
				<view class="ttwo threeview">
					<view class="tlist">
						<view class="thead">
							<view class="tview">
								账号
							</view>
							<view class="tview center">
								时间
							</view>
							<view class="tview tend">
								返佣奖励
							</view>
						</view>
						<view class="thead" v-for="(item,index) in invitelist" :key="index">
							<view class="tview">
								{{item.email}}
							</view>
							<view class="tview center">
								{{item.created_at}}
							</view>
							<view class="tview tend lv">
								{{item.amount}} USDT
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="one" v-if="tabcurrent == 2">
				<view class="ttwo">
					<view class="tlist">
						<view class="thead">
							<view class="tview">
								时间
							</view>
							<view class="tview tend">
								分红奖励
							</view>
						</view>
						<view class="thead" v-for="(item,index) in weeklist" :key="index">
							<view class="tview">
								{{item.created_at}}
							</view>
							<view class="tview tend lv">
								{{item.amount}} USDT
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 邀请弹窗 -->
		<view class="yaopop">
			<u-popup v-model="yaoshow" mode="center" width="86%">
				<view class="ypopview">
					<image class="myao" src="/static/mine/myao.png" mode=""  />
					<view class="pview">
						<u-icon name="close" color="#333" size="28" class="cha" @click="yaoshow=false"></u-icon>
						<text class="pname">邀请好友 <text class="lingqu">领取</text>奖励</text>
						<view class="yaoview">
							<view class="plview">
								<text class="lianname">链接</text>
								<view class="pitem">
									<text class="lname txt">{{info.profile.ucode_url}}</text>
									<image class="copy" src="/static/img/copy.png" mode="" @click="copy(info.profile.ucode_url)" />
								</view>
							</view>
							<view class="plview">
								<text class="lianname">邀请码</text>
								<view class="pitem">
									<text class="lname txt">{{info.profile.ucode}}</text>
									<image class="copy" src="/static/img/copy.png" mode="" @click="copy(info.profile.ucode)" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist:[
					{
						name: '我的团队'
					}, {
						name: '返佣奖励'
					}, {
						name: '周分红'
					}
				],
				tabcurrent:0,
				isshai:false,
				yaoshow:false,
				type:'',//home 就是首页进来
				info:{
					profile:{
						ucode_url:'',
						ucode:''
					}
				},
				teamlist:[],
				teaminfo:{
					team_total:0,
					total_money:0
				},

				invitelist:[],
				inviteinfo:{
					week_income:0,
					today_income:0
				},
				weeklist:[],

				page: 1,
				limit: 10,
				last_page: 1,
				status: "nomore",
			}
		},
		onLoad(option) {
			this.getinviteinfo();//邀请好友接口
			this.type = option.type
			
			// console.log(this.Themecolor)
			this.getteam();//我的团队
			this.getinvite();//邀请返佣
			this.getdividend();//周分红
		},
		onShow() {
		},
		methods: {
			async getteam(){
				let res = await this.$u.api.get_team({
				});
				this.teaminfo = res
				this.teamlist = res.user_list
			},
			async getinvite(){
				let res = await this.$u.api.invite_rebate({
				});
				this.inviteinfo = res
				this.invitelist = res.list
			},
			async getdividend(){
				let res = await this.$u.api.week_dividends({
				});
				this.weeklist = res.list
			},
			async getinviteinfo(){
				let res = await this.$u.api.userinfo({
				});
				this.info = res
				if(this.type == 'home'&&!this.yaoshow){
					this.yaoshow = true
				}
			},
			change(index) {
				this.current = index;
			},
			tabchange(e){
				this.tabcurrent = e
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		padding-bottom: 100rpx;
		.tabview{
			padding:15rpx 20rpx;
			background-color: #fff;
			z-index: 100;
			// margin-top:  calc(var(--window-top));
		}
		.tone{
			padding: 40rpx;
			background: #F7F7F7;
			border-radius: 20rpx;
			margin: 20rpx 40rpx 30rpx;
			.tname{
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 30rpx;
				color: #000000;
				display: block;
				margin-bottom: 15rpx;
			}
			.tmiao{
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 30rpx;
				color: #000000;
			}
		}
		.ttwo{
			padding: 30rpx 30rpx;
			background: #F7F7F7;
			border-radius: 20rpx;
			margin: 0rpx 40rpx 30rpx;
			.tlist{
				display: flex;
				flex-direction: column;
				.thead{
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 20rpx 0;
					.tview{
						// width: 50%;
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
					}
					.threeview{
						width: 50%;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
					}
					.tend{
						justify-content: flex-end;
						// width: 33%;
					}
					.center{
						justify-content: center;
					}
					.lv{
						font-family: Source Han Sans CN;
						font-weight: bold;
						font-size: 24rpx;
						color: #32BE67;
					}
				}
			}
		}
		.threeview{
			.tlist{
				.thead{
					.tview{
						font-size: 24rpx;
					}
				}
			}
		}
	}
	.chongji{
		width: 36rpx;
		height: 40rpx;
	}
	// 底部弹窗
	.botpop{
		/deep/.u-drawer-bottom{
			background-color: transparent;
		}
		.popview{
			padding: 30rpx 0;
			background-color: #fff;
			border-radius: 40rpx 40rpx 0 0;
		}
		.shaiview{
			padding: 25rpx 30rpx;
			// background-color: #fff;
			display: flex;
			flex-direction: column;
			position: relative;
    		width: 100%;
			// z-index: 100;
			.shaiitem{
				margin-bottom: 20rpx;
				.shaitit{
					display: block;
					margin-bottom: 24rpx;
					font-family: PingFangSC;
					font-weight: bold;
					font-size: 24rpx;
					color: #333333;
				}
				.shailist{
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					.shais{
						width: 31%;
						margin-right: 2%;
						height: 64rpx;
						background: #F8F8F8;
						border-radius: 32rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 25rpx;
						font-weight: 500;
						font-size: 22rpx;
						color: #333333;
					}
					.sactive{
						background: #FFF0F0;
						color: #FA4E4E;
					}
				}
			}
			.shaiitem:last-child{
				margin-bottom: 0 !important;
			}
			
			.chongview{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				.czhi{
					width: 48%;
					height: 80rpx;
					background: #F8F8F8;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #111111;
				}
				.que{
					width: 48%;
					height: 80rpx;
					background: linear-gradient(-90deg, #FA4E4E, #FD894F);
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #fff;
				}
			}
		}

	}
	//邀请弹窗
	.yaopop{
		/deep/.u-mode-center-box{
			background-color: transparent;
		}
		.ypopview{
			width: 100%;
			height: 1000rpx;
			position: relative;
			.myao{
				position: absolute;
				width: 100%;
				height: 100%;
				// border-radius: 50rpx;
			}
			.pview{
				position: relative;
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				padding: 0 33rpx;
				.cha{
					position: absolute;
					right: 30rpx;
					top: 30rpx;
					z-index: 10;
				}
				.pname{
					font-family: Source Han Sans CN;
					font-weight: bold;
					font-size: 40rpx;
					color: #000000;
					display: block;
					text-align: center;
					margin: 10% 0;
				}
				.lingqu{
					color: rgba(255, 76, 70, 1);
				}
				.yaoview{
					padding: 40rpx 40rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 17rpx 1rpx rgba(255,95,83,0.46);
					border-radius: 40rpx;
					border: 1px solid #FF8004;
					margin-top: auto;
					margin-bottom: 30rpx;
					.plview{
						display: flex;
						flex-direction: column;
						margin-bottom: 70rpx;
						.lianname{
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 26rpx;
							color: #000000;
							display: block;
							margin-bottom: 25rpx;
						}
						.pitem{
							padding: 25rpx 30rpx;
							background: #FFEBE5;
							border-radius: 10rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							.lname{
								max-width: 90%;
								display: inline-block;
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 26rpx;
								color: #000000;
							}
							.copy{
								margin-left: auto;
								width: 31rpx;
								height: 31rpx;
							}
						}
					}
					.plview:last-child{
						margin-bottom: 0;
					}
				}
			}
		}
	}
</style>
